<template>
	<view class="example_box">
		<view class="ex_list">
			<view @click="toexampinfo(item)" class="ex_item" v-for="(item,index) in examplelist" :key="index">
				<view class="ex_content">
					<view class="left">
						<image style="width: 285rpx;height: 162rpx;" :src="item.caseTitleImage" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="title">
							{{item.caseName}}
						</view>
						<view class="timelang">
							<span style="margin-right: 20rpx;letter-spacing: 4rpx;">项目周期:</span>
							<span style="">{{item.caseCycle}}</span>
						</view>
						<view class="money">
							<span style="margin-right: 20rpx;letter-spacing: 4rpx;">项目周期:</span>
							<span>{{item.caseAmount}}</span>
						</view>
					</view>
				</view>
				<view class="ex_bottom">
					<view class="b_left">
						<view class="num">
							<span>105</span>
							<span>人学习过</span>
						</view>
						<view class="avator">
							<view class="a_img">
								<image style="width: 48rpx;height: 48rpx;" src="" mode=""></image>
							</view>
							<view class="a_name">
								{{item.authorName}}
							</view>
						</view>
					</view>
					<view class="b_right">
						<view class="btn_info">
							查看案例
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default{
		name:'exampList',
		data(){
			return{
				// examplist:[]
			}
		},
		computed: {
		  ...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		props:{
			examplelist:{
				type:Array,
				value:[]
			},
			labelindex:{
				type:Number,
				value:null
			}
			
		},
		created() {
			// this.getexampList()
			// console.log(this.labelindex,'22');
		},
		watch:{
			labelindex:{
				handler(ne,ol){
					console.log(ne,ol);
				}
			}
		},
		methods:{
			
			getexampList(){
			
				this.$request({
					url:'v3/case/front/excellentCase/page',
					method:"GET",
					data:{createBy:this.userCenterData.vendorId}
				})
				
				
			},
			
			
			toexampinfo(val){
				// 保存标签当前位置
				
				uni.navigateTo({
					url:"/extra/exampinfo/exampinfo?id="+val.caseId
				})
				 uni.setStorageSync('examplistId',this.labelindex)
			},
			
			
		}
		 
	}
</script>

<style lang="scss" scoped>
	.example_box{
		.ex_list{
			.ex_item{
				padding: 20rpx;
				margin-top: 10rpx;
				background-color: #fff;
				.ex_content{
					display: flex;
					
					.left{
						background-color: #fff;
						border-radius: 10rpx;
					}
					.right{
					   padding-left: 20rpx;
					   .title{
						   font-size: 28rpx;
						   font-weight: 600;
					   }
					  .money,.timelang{
						   font-size: 24rpx;
						   margin-top: 20rpx;
					   }
					}
				}
				.ex_bottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					padding-top: 30rpx;
					.b_left{
						display: flex;
						align-items: center;
						.avator{
							display: flex;
							align-items: center;
							margin-left: 20rpx;
							.a_img{
								background-color: #FC701E;
								border-radius: 50%;
								margin-right: 10rpx;
							}
						}
					}
					.b_right{
						.btn_info{
							width: 160rpx;
							height: 50rpx;
							background-color: #FC701E;
							border-radius: 25rpx;
							color: #fff;
							text-align: center;
							line-height: 50rpx;
						}
					}
				}
			}
		}
	}
</style>